<template>
  <div>
    <s-header :name='"订单"' />
    <div class="order-container">
      <van-tabs v-model="status" class="order-tab" @click="onChangeTab">
        <van-tab title="全部" name=''></van-tab>
        <van-tab title="未付款" name='0'></van-tab>
        <van-tab title="待发货" name='1'></van-tab>
        <van-tab title="待收货" name='2'></van-tab>
        <van-tab title="已完成" name='3'></van-tab>
        <van-tab title="已关闭" name='4'></van-tab>
      </van-tabs>
      <div class="content">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="load_more"
            class="order-list"
          >
            <div v-for="item in orderList" :key="item.id" class="order-item" @click="goTo(item.orderSn)">
                <div class="order-item-header">
                  <span>订单时间：{{ item.createTime.replace('T', ' ') }}</span>
                  <span>{{ statusString[item.status] }}</span>
                </div>
              <van-card
                v-for="i in item.orderItemList" :key="i.id"
                style="background: #fff"
                :num="i.productQuantity"
                :price="i.productPrice"
                :desc="i.productSubTitle"
                :title="i.productName"
                :thumb="i.productPic"
              />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>

import { getOrderPage } from "@/api/order";
import sHeader from '@/components/SHeader';

export default {
  name: 'orderList',
  data() {
    return {
      status: 0, 
      orderList: [],
      pageNum: 1,
      pageSize: 5,
      pageTotal: 0,
      refreshing: false,
      finished: false,//是否加载
      loading: false,//加载状态
      statusString: [
        "未付款", "未发货", "已发货",  "已完成", "已关闭", "无效订单"
      ],
    }
  },
  components: {
    sHeader,
  },
  created() {
  },
  methods: {
    load_more() {
      if (!this.refreshing && this.pageNum < this.pageTotal) {
        this.pageNum += 1
      }
      if (this.refreshing) {
        this.orderList = [];
        this.refreshing = false;
      }
      this.onLoad();
    },
    async onLoad() {
      const { data: list  } = await getOrderPage({status: this.status, pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
        return res
      })
      this.orderList = this.orderList.concat(list.records);
      this.pageTotal = list.total;
      this.loading = false;
      if(this.pageNum >= list.total) {
        this.finished = true;
      } else {
        this.finished = false;
      }
    },
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.pageNum = 1
      this.load_more()
    },
    onChangeTab(name) {
      this.status = name
      this.onRefresh()
    },
    goTo(orderSn) {
      this.$router.push({
        path: '/order-detail',
        query: {orderSn: orderSn}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .order-container {
      position: fixed;
      z-index: 10000;
      line-height: 44px;
      padding: 0 10px;
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;
      .order-name {
        font-size: 14px;
      }
    .order-tab {
      position: fixed;
      z-index: 1000;
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
    }
    .content {
      height: 100vh;
      overflow: hidden;
      margin-top: 34px;
      :deep().van-pull-refresh{
        height: 100%;
      }
      .order-list {
        .order-item {
          margin: 20px 10px;
          background-color: #fff;
          .order-item-header {
            padding: 10px 20px 0 20px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>